<template>
  <div id="app">
    <Intro></Intro>
    <div>
      <img src="./assets/cloud1.png" alt="cloud" class="cloud1">
      <img src="./assets/cloud2.png" alt="cloud" class="cloud2">
      <img src="./assets/cloud3.png" alt="cloud" class="cloud3">
      <img src="./assets/triangle.png" alt="triangle" class="triangle">
      <img src="./assets/light.png" alt="light" class="light">
      <transition
        name="slide"
        mode="out-in"
        enter-active-class="enter"
        leave-active-class="leave"
      >
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
  </div>
</template>

<script>

// import axios from "axios"
import Intro from './components/Index/Intro'
export default {
  name: 'App',
  components: { Intro },
  methods: {
    // async login () {
    //   const{ data:res } = await axios.post(localhost:80/brain/LoginServlet)
    // }
  },
  created () {
    this.login()
  }
}
</script>

<style lang="less">

@mainColor:#fed71a;

*{
  padding: 0;
  margin: 0;
  list-style: none;
  color: #000;
  text-decoration: none;
}
  #app{
    width: 100vw;
    height: 100vh;
    background-color: @mainColor;
    overflow-x: hidden;
  }
  @keyframes move-enter {
    from{
      transform: translateX(1600px);
    }
    to{
      transform: translateX(0);
    }
  }
  @keyframes move-leave {
    from{
      transform: translateX(0);
    }
    to{
      transform: translateX(-1600px);
    }
  }
  .enter {
    animation: move-enter 0.75s ease-in-out;
  }
  .leave {
    animation: move-leave 0.75s ease-in-out;
  }
@keyframes cloud1 {
  0% {
    transform: translate(0);
  }
  25% {
    transform: translate(5px, 16px);
  }
  50% {
    transform: translate(-10px, 12px);
  }
  75% {
    transform: translate(5px, -16px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes cloud2 {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translate(-10px, 5px);
  }
  25% {
    transform: translate(-5px, 20px);
  }
  50% {
    transform: translate(10px, 12px);
  }
  75% {
    transform: translate(5px, -13px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes cloud3 {
  0% {
    transform: translate(0);
  }
  10% {
    transform: translate(15px, 5px);
  }
  25% {
    transform: translate(20px, 0);
  }
  50% {
    transform: translate(30px, 12px);
  }
  75% {
    transform: translate(19px, -5px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes triangle {
  0% {
    transform: translate(10px);
  }
  25% {
    transform: translate(50px, 18px);
  }
  50% {
    transform: translate(100px, 10px);
  }
  75% {
    transform: translate(70px, -2px);
  }
  100% {
    transform: translate(10px);
  }
}
.cloud1 {
  animation: cloud1 12s linear infinite;
  position: absolute;
  right: 100px;
  top: 120px;
}

.cloud2 {
  animation: cloud2 10s ease-in-out infinite;
  position: absolute;
  left: 530px;
  bottom: 50px;
}

.cloud3 {
  animation: cloud3 15s linear infinite;
  position: absolute;
  left: 200px;
  top: 100px;
  opacity: .8;
}

.triangle {
  animation: triangle 11s ease-out infinite;
  position: absolute;
  left: 600px;
  top: 90px;
}

.light {
  position: absolute;
  bottom: 0;
  left: 100px;
}
</style>
